<template>
  <div id="footer">
    <div class="song" v-show="show">
      <div class="pic" @click="showSongPage">
        <img :src="songInfo.al.picUrl" alt="" />
      </div>
      <div class="message">
        <div class="name" @click="showSongPage">
          {{ songInfo.name }}
        </div>
        <div class="author" @click="showSongPage">
          {{ songInfo.ar[0].name }}
        </div>
      </div>
    </div>
    <div class="playcontrol" v-show="show">
      <audio
        ref="audio"
        :src="playUrl"
        controls
        autoplay="autoplay"
        @timeupdate="timeupdate"
        hidden
      ></audio>
      <div class="controlbutton">
        <span
          class="icon-xunhuanbofang"
          v-show="i == 0"
          @click="changeI"
        ></span>
        <span class="icon-danquxunhuan" v-show="i == 1" @click="changeI"></span>
        <span class="icon-suijibofang" v-show="i == 2" @click="changeI"></span>
        <span class="icon-shangyishou" @click="shangyishou"></span>
        <span class="icon-bofang" v-show="!playing" @click="pause"></span>
        <span class="icon-zanting" v-show="playing" @click="start"></span>
        <span class="icon-xiayishou" @click="xiayishou"></span>
        <span class="icon-xihuan" v-show="!isLike" @click="cancelLike"></span>
        <span class="icon-xihuanfill" v-show="isLike" @click="addLike"></span>
      </div>
      <div class="controltime" @click="changeProgress($event)">
        <div class="time" v-bind:style="{ width: progressWidth + '%' }">
          <div class="timecircle"></div>
        </div>
      </div>
    </div>
    <div class="playcontrol" id="initialization" v-show="!show">
      <div class="controlbutton">
        <span class="icon-xunhuanbofang"></span>
        <span class="icon-shangyishou"></span>
        <span class="icon-bofang"></span>
        <span class="icon-xiayishou"></span>
        <span class="icon-xihuan"></span>
      </div>
      <div class="controltime"></div>
    </div>
    <div class="songmessage" @click="emitShowSongList">
      <span class="icon-liebiao"></span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Footer",
  props: ["changeIsShowSinging"],
  data() {
    return {
      i: 0,
      progressWidth: 0,
      // currentTime: 0,
      // duration: 0,
      songName: "",
      songCoverImage: "",
      songAuthor: "",
      isLike:false,

      show: false,


    };
  },
  computed: {
    ...mapState("songAbout", [
      "playUrl",
      "songInfo",
      "playing",
      "index",
      "singinglist",
    ]),
    sign() {
      return this.playing;
    },
  },
  watch: {
    sign() {
      if (this.playing) {
        this.show = true;
      }
    },
    playUrl(){
      axios
      .get("http://localhost:8013/api/likelist?uid="+ this.$store.state.userAbout.userInfo.id)
      .then((res)=>{
        console.log(res.data.ids);
        let flag = res.data.ids.some(item=>{
          return item == this.songInfo.id
        })
        if(flag){
          this.isLike = true
        }else{
          this.isLike = false
        }
      })
      console.log(this.isLike);
    }
  },
  methods: {
    each() {
      console.log(7777);
    },
    //是否展示播放歌曲的页面
    showSongPage() {
      this.changeIsShowSinging();
    },
    //触发自定义事件，绑定在main组件，用来控制显示或关闭当前歌曲列表
    emitShowSongList() {
      this.$bus.$emit("changeShowPlayList");
    },

    //暂停歌曲
    pause() {
      this.$refs.audio.play();
      this.$store.commit("songAbout/CHANGE", true);
    },
    //播放歌曲
    start() {
      this.$refs.audio.pause();
      this.$store.commit("songAbout/CHANGE", false);
    },
    //
    timeupdate() {
      const currentTime = this.$refs.audio.currentTime;
      const duration = this.$refs.audio.duration;
      this.progressWidth = (currentTime / duration) * 100;
      if (currentTime == duration) {
        if (this.i == 0) {
          this.loadmusic(this.index + 1);
        } else if (this.i == 1) {
          this.$refs.audio.currentTime = 0
          this.$refs.audio.play()
        } else {
          const ind = Math.round(Math.random()*this.singinglist.length-1);
          this.loadmusic(ind);
          console.log(ind);
        }
      }

      // for (let i = 0; i < this.lyricsObjArr.length; i++) {
      //   if (this.currentTime > parseInt(this.lyricsObjArr[i].time)) {
      //     const index = this.$refs.lyric[i].dataset.index;
      //     if (i === parseInt(index)) {
      //       this.lyricIndex = i;
      //       this.$refs.lyricUL.style.transform = `translateY(${
      //         170 - 30 * (i + 1)
      //       }px)`;
      //     }
      //   }
      // }
    },

    //加载音乐
    loadmusic(index) {
      console.log(index);
      this.$store.dispatch("songAbout/playsongid", index);
      //改变状态
      this.$store.commit("songAbout/CHANGE", true);
    },
    shangyishou() {
      this.loadmusic(this.index - 1);
    },
    xiayishou() {
      this.loadmusic(this.index + 1);
    },
    //改变进度
    changeProgress(e) {
      console.log((e.offsetX / 450) * 100);
      this.progressWidth = (e.offsetX / 450) * 100;
      this.$refs.audio.currentTime =
        (e.offsetX / 450) * this.$refs.audio.duration;
    },

    changeI() {
      this.i == 2 ? (this.i = 0) : this.i++;
    },

    addLike(){
      alert("取消喜欢")
      axios.get("http://localhost:8013/api/like?like=false&id="+this.songInfo.id)
      this.isLike = false
    },

    cancelLike(){
      alert("添加到喜欢")
      axios.get("http://localhost:8013/api/like?id="+this.songInfo.id)
      this.isLike = true
    }
  },
  mounted() {
    //加载当前播放列表
    axios
      .get("http://localhost:8013/api/playlist/track/all?id=2941955068")
      .then((res) => {
        // console.log(res.data.songs);
        this.$store.commit("songAbout/UPDATESONG", res.data.songs);
      });

    // this.$bus.on("geci",this.each())

    //
    this.$bus.$on("clearList", () => {
      this.show = false;
    });
  },
};
</script>

<style scoped>
#footer {
  position: fixed;
  bottom: 0;
  height: 75px;
  text-align: center;
  border-top: 1px solid #bbb;
  background: #fff;
  width: 100%;
  min-width: 1100px;
  z-index: 99;
  text-align: center;
}
.song {
  width: 230px;
  height: inherit;
  display: flex;
  text-align: left;
  float: left;
}
.song .pic {
  width: 50px;
  height: 50px;
  border-radius: 2px;
  margin: 12px 10px 0px 7px;
  cursor: pointer;
}
.song .pic img {
  width: 50px;
  height: 50px;
  border-radius: 2px;
}
.song .message {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.song .message .name,
.message .author {
  max-width: 180px;
  max-height: 20px;
  overflow: hidden;
  cursor: pointer;
}
.message .author {
  color: rgb(88, 88, 88);
  font-size: 14px;
}
#footer .playcontrol {
  height: 40px;
  /* background: burlywood; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#footer .songmessage {
  width: 50px;
  height: 50px;
  float: right;
  margin-right: 60px;
  margin-bottom: 20px;
}
.icon-liebiao {
  font-size: 20px;
  line-height: 70px;
}
.controlbutton {
  width: 50%;
  height: 20px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-bofang,
.icon-zanting {
  font-size: 30px;
}
.icon-shangyishou,
.icon-xiayishou {
  font-size: 25px;
}
.playcontrol .controltime {
  height: 5px;
  width: 450px;
  background: rgb(170, 170, 170);
  margin: 15px auto;
  border-radius: 10px;
  position: relative;
}
.playcontrol .controltime:hover .timecircle {
  display: block;
}
.playcontrol .controltime .time {
  position: absolute;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  left: 0;
  top: 0;
  background: rgb(255, 187, 187);
  height: inherit;
  width: 10px;
}
.timecircle {
  display: none;
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(255, 191, 191);
  right: -5px;
  top: -2px;
}
#initialization span {
  color: #ddd;
}
#initialization .controltime {
  background: #ddd;
}
</style>